<template>
    <div>
        <el-alert
            title="为指定渠道设置最低版本号, 低于此版本号的将下载最新APK进行强更. 未配置的渠道不影响."
            type="warning"
            :closable="false"
            show-icon>
        </el-alert>
        <el-divider></el-divider>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source"></select-app-source>
                </el-form-item>
                <el-form-item label="系统">
                    <select-os v-model="search.os"></select-os>
                </el-form-item>
                <el-form-item label="版本">
                    <el-input class="filter-item" clearable v-model="search.curVer" placeholder="版本号" style="width: 150px;"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="batchAdd" plain>添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            v-loading.body="loading"
            ref="xTable"
            stripe
            border
            :data="tableData"
            tooltip-effect="dark"
            class="text-center"
            :max-height="maxHeight"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            style="width: 100%">
            <vxe-table-column type="checkbox" width="40" fixed="left"/>
            <vxe-table-column title="ID" field="id" width="50"/>
            <vxe-table-column title="渠道号" field="source" width="120">
                <template slot-scope="scope">
                    <tag-app-source :source="scope.row.source"></tag-app-source>
                </template>
            </vxe-table-column>
            <vxe-table-column title="系统类型" field="os" width="80">
                <template slot-scope="scope">
                    <tag-os :data="scope.row.os"></tag-os>
                </template>
            </vxe-table-column>
            <vxe-table-column title="最小版本" field="minVer" width="100"/>
            <vxe-table-column title="当前版本" field="curVer" width="100"/>
            <vxe-table-column title="强制" field="force" width="60">
                <template slot-scope="scope">
                    <boolean-icon :data="scope.row.force"></boolean-icon>
                </template>
            </vxe-table-column>
            <vxe-table-column title="下载包路径" field="url" min-width="300">
                <template slot-scope="scope">
                    <el-link :href="scope.row.url">{{ scope.row.url }}</el-link>
                </template>
            </vxe-table-column>
            <vxe-table-column title="更新说明" field="comment" width="100">
                <template slot-scope="scope">
                    <el-popover
                        v-if="scope.row.comment"
                        placement="left"
                        width="400"
                        trigger="click">
                        {{ scope.row.comment }}
                        <el-button slot="reference">查看</el-button>
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </vxe-table-column>
            <vxe-table-column title="更新时间" field="updated_at" width="160"/>
            <vxe-table-column title="操 作" width="150px">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        @click="edit(scope.row)">
                        编辑
                    </el-button>
                    <destroy-confirm
                        route="appVersion/Destroy"
                        :primary="scope.row.id"
                        @success="handleSearch">
                    </destroy-confirm>
                </template>
            </vxe-table-column>
        </vxe-table>

        <div class="mt-10 pull-left">
            <destroy-multiple
                route="appVersion/DestroyMultiple"
                :selected="selected"
                @success="handleSearch">
                <el-button type="danger" plain>删除选中</el-button>
            </destroy-multiple>

            <el-button icon="el-icon-edit" @click="batchUpdate">批量编辑</el-button>
        </div>

        <el-pagination
            class="pull-right"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog
                :title="form.data && form.data.id ? '编辑' : '添加'"
                :visible.sync="form.show"
                width="30%"
                :append-to-body="true"
                center>
            <dialog-form
                    :data="form.data"
                    v-on:submit="onFormSubmit"
                    v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>

        <el-dialog
            title="系统提示"
            :visible.sync="dialogNotice.show"
            :append-to-body="true"
            width="400px"
            center>
            <h2>这里是APP强更版本管理, 请注意</h2>
        </el-dialog>

        <el-dialog
            title="批量处理"
            :visible.sync="formBatch.show"
            width="60%"
            :append-to-body="true"
            :close-on-click-modal="false"
            center>
            <dialog-batch
                :data="formBatch.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="formBatch.show = false">
            </dialog-batch>
        </el-dialog>

    </div>
</template>

<script>
import TagOs from '~/components/Tag/os';
import dialogForm from './form';
import dialogBatch from "./batch.vue";
export default {
    components: {
        dialogBatch,
        dialogForm,
        TagOs,
    },
    data() {
        return {
            search: {
                appid: '',
                source: '',
                os: '',
                curVer: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            options: this.$store.state.appVersion.options,
            form: {
                data: {},
                show: false,
            },
            formBatch: {
                show: false,
                data: [],
            },
            dialogNotice: {
                show: true,
            },
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 280;
        },
    },
    watch: {
        '$route' (val) {
            if (val.name === 'appVersion.index') {
                this.dialogNotice.show = true;
            }
        }
    },
    methods: {
        selectAllEvent ({ checked, records }) {
            this.selected = records;
            // console.log(checked ? '所有勾选事件' : '所有取消事件', records)
        },
        selectChangeEvent ({ checked, records }) {
            this.selected = records;
            // console.log(checked ? '勾选事件' : '取消事件', records)
        },
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('appVersion/Lists', filter).then(res => {
                this.tableData = res.data.data;
                this.totalDataNumber = res.data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        create() {
            this.form.data = {};
            this.form.show = true;
        },
        edit(row) {
            this.form.data = row;
            this.form.show = true;
        },
        onFormSubmit() {
            this.form.show = false;
            this.formBatch.show = false;
            this.handleSearch();
        },
        batchAdd() {
            this.formBatch.data = [];
            this.formBatch.show = true;
        },
        batchUpdate() {
            if (!this.selected.length) {
                this.$message.warning('请先选择数据');
                return false;
            }
            this.formBatch.data = this.selected;
            this.formBatch.show = true;
        }
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

